import React, { Component } from 'react';

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity,
  Alert
} from 'react-native';

import styled from 'styled-components';
import { queryPoliceList } from '../../api';
import { getToken } from '../../utils/auth';
import { Actions } from 'react-native-router-flux';

// import Cal from './cal';
import Cal from './Cal';
import LinearGradient from 'react-native-linear-gradient';
import InputItem from 'antd-mobile-rn/lib/input-item';
import WhiteSpace from 'antd-mobile-rn/lib/white-space';
import moment from 'moment';

export default class personClock extends Component {
  state = {
    worklog_error: false,
    prisonInfo: [],
    workcollect: '',
    actiondate: '',
    prisonCount: '',
    stepData: [],
    isShow: true,
    error: false,
    errorInfo: '',
    imgUrl: require('../../assets/work/sportsRankings/backtrack.png'),
    location: require('../../assets/work/policeClock/location.png')
  };

  render() {
    return (
      <View style={{ backgroundColor: '#fff' }}>
        <OnTouchableOpacity onPress={() => Actions.home()}>
          <View>
            <Image
              source={this.state.imgUrl}
              style={{ width: 40, height: 20, margin: 5 }}
            />
          </View>
        </OnTouchableOpacity>
        <MovementTextTitle>打卡记录</MovementTextTitle>
        <ScrollView
          style={{
            height: 800,
            backgroundColor: '#fff',
            position: 'relative'
          }}>
          <View style={styles.container}>
            {/* <Cal /> */}
            <Cal
              // bgColor='#b50' //背景颜色
              // headTextColor='#b30' //头部文字颜色
              // textColor='#f00' //日期文字颜色
              // activeBgColor='#fb0' //选中背景色
              // activeTextColor='#fff' //选中文字颜色
              //borderRadius={0} //圆角
              callback={data => {
                this.state.actiondate = data[0].actiondate;
                this.state.actiondate = this.state.actiondate.replace(
                  '年',
                  '-'
                );
                this.state.actiondate = this.state.actiondate.replace(
                  '月',
                  '-'
                );
                this.state.actiondate = this.state.actiondate.replace('日', '');
                getToken().then(token => {
                  let params = {
                    parSiteDate: this.state.actiondate
                  };
                  queryPoliceList(token, params)
                    .then(res => {
                      const info = [];
                      this.setState({
                        prisonInfo: []
                      });
                      let count = 0;
                      res.data.forEach(item => {
                        console.log(item);
                        count += 1;
                        info.push(...this.state.prisonInfo, item);
                      });
                      this.setState({
                        prisonInfo: info,
                        prisonCount: count
                      });
                    })
                    .catch(error => {
                      this.setState({
                        error: true,
                        errorInfo: error
                      });
                    });
                });
                console.log(this.state.prisonInfo);
                console.log(this.state.prisonCount);
              }} //回调方法
              presentback={data => {
                console.log(data);
                getToken().then(token => {
                  let params = {
                    parSiteDate: data
                  };
                  queryPoliceList(token, params)
                    .then(res => {
                      this.setState({
                        prisonInfo: []
                      });
                      const info = [];
                      let count = 0;
                      res.data.forEach(item => {
                        console.log(item);
                        count += 1;
                        console.log(
                          '=============================================='.time
                        );
                        info.push(...this.state.prisonInfo, item);
                      });
                      this.setState({
                        prisonInfo: info,
                        prisonCount: count
                      });
                    })
                    .catch(error => {
                      this.setState({
                        error: true,
                        errorInfo: error
                      });
                    });
                  console.log(this.state.prisonInfo);
                  console.log(this.state.prisonCount);
                });
              }}
            />
          </View>
          <View>
            <Text style={{ fontSize: 18 }}>
              今日打卡
              <Text style={{ color: '#7667FE' }}>
                {this.state.prisonCount == 0 ? 0 : this.state.prisonCount}
              </Text>
              次
            </Text>
            <View>
              {this.state.prisonInfo.map(item => {
                return (
                  <View
                    style={{
                      borderBottomColor: '#A2A9BD',
                      borderTopColor: '#A2A9BD',
                      borderBottomWidth: 0.5,
                      marginTop: 10
                    }}>
                    <View
                      style={{
                        flexDirection: 'row',
                        flex: 1
                      }}>
                      <Text
                        style={{
                          marginLeft: 10,
                          color: '#333333',
                          fontSize: 18
                        }}>
                        打卡时间：
                        {item.parSiteTime}
                      </Text>
                      <View
                        style={{
                          left: 20,
                          borderRadius: 11,
                          width: 40,
                          backgroundColor: '#FD6A66'
                        }}>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 18,
                            textAlign: 'center'
                          }}>
                          {item.parSiteType}
                        </Text>
                      </View>
                    </View>
                    <View
                      style={{
                        flexDirection: 'row',
                        flex: 1,
                        marginTop: 10
                      }}>
                      <Image
                        source={this.state.location}
                        style={{
                          marginLeft: 10,
                          marginTop: 6,
                          fontSize: 18
                        }}
                      />
                      <Text
                        style={{
                          marginRight: 10,
                          marginLeft: 10,
                          color: '#A2A9BD',
                          fontSize: 18
                        }}>
                        {item.parSiteAddr}
                      </Text>
                    </View>
                  </View>
                );
              })}
            </View>
          </View>
          {/* position: 'absolute', */}
        </ScrollView>
      </View>
    );
  }
}

const MovementTextTitle = styled.Text`
  font-size: 40;
  margin-top: 25;
  margin-left: 10;
  font-weight: 500;
`;
const styles = StyleSheet.create({
  container: {
    height: 380,
    backgroundColor: '#F5FCFF',
    marginTop: 10
  }
});

const OnTouchableOpacity = styled.TouchableOpacity``;
